<template>
  <div>
      <!-- 简介 -->
      <div class="jianjie">商品简介</div>
     <!-- 守护者 -->
     <div class="zhongjiang">星之守护者迦娜(7天)该道具拼手气中奖概率:50%温馨提示</div>
     <!-- 温馨 -->
     <div class="wenxin">温馨提示</div>
     <!-- 5ge -->
     <div class="five">
         <div class="one" v-for="(v,i) in arr1" :key="i">{{v.text}}</div>
     </div>
     <!-- 福利 -->
     <div class="fuli">查看更多英雄联盟福利</div>
     <!-- 抽奖 -->
     <div class="choujiang">立即抽奖</div>
  </div>
</template>

<script>
import getapi from "@/apis/getapi.js";
export default {
  mounted() {
    getapi("/xiaojiang").then((ok) => {
      this.arr1 = ok.data.data12;
      // console.log(ok);
    });
  },
    data() {
    return {
      arr1: [],
    };
  },
}
</script>

<style scoped>
.jianjie{
    width: 100%;
    height: 0.2rem;
    font-size: .16rem;
    /* margin-left: 0.3rem; */
}
.zhongjiang{
    width: 100%;
    height: 0.2rem;
    font-size: .12rem;
    /* margin-left: 0.25rem; */
    font-weight: 400;
    color: #9c9c9c;
}
.wenxin{
    width: 100%;
    height: 00.3rem;
    font-size: .16rem;
    font-weight: 500;
    /* margin-left: 00.3rem; */
}
.five{
    width: 100%;
    height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 00.5rem;
}
.one{
    width: 100%;
    height: 0.4rem;
    /* background-color: blueviolet; */
    font-size: .12rem;
    color: darkgrey;
    line-height: 00.4rem;
    /* margin-left: 00.3rem; */
}
.fuli{
  width: 100%;
  height: 00.4rem;
  /* background-color: aquamarine; */
  text-align: center;
  line-height: 0.4rem;
  font-size: .18rem;
  font-weight: 600;
  border-top: 1px solid darkgrey;
  color: #52a9de;
  border-bottom: 00.2rem;
}
.choujiang{
  width: 100%;
  height: 0.5rem;
  background-color: #fed03c;
  border-radius: 00.3rem;
  text-align: center;
  line-height: 00.5rem;
  font-size: .16rem;
  font-weight: 600;
}
</style>